<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2_固定定位全屏遮罩</title>
    <style>
        .mask {
            background-color: rgba(0,0,0,.3);
            /* 固定定位以html视口为参照物
            紧贴4个边，实现撑满全屏的效果 */
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }
    </style>
</head>
<body>
    <div class="mask"></div>
    <div>
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis delectus dolorem eius harum in maxime
            perspiciatis, praesentium quis veniam! Autem eligendi error explicabo fugiat id praesentium quibusdam
            recusandae veniam vitae.
        </div>
        <div>Excepturi illum maxime mollitia nisi vel vero. A, beatae, consequatur culpa dolor dolorum, ducimus ea
            facere iusto maiores maxime perspiciatis quia reiciendis voluptates. Doloribus fugit harum quas quasi rem,
            sapiente?
        </div>
        <div>Cumque dolorum eius eligendi eveniet, ipsum officiis quam quas saepe, sint soluta tenetur voluptatum?
            Aliquid enim iste molestias neque odit quae similique suscipit. A consequatur debitis delectus hic, ratione
            tempora?
        </div>
        <div>Adipisci aperiam asperiores cumque, doloremque doloribus ex harum hic impedit in, ipsam magnam minima
            molestiae nihil, odit pariatur placeat quidem quisquam repudiandae sit tempora veritatis voluptas
            voluptates. Blanditiis fugit, molestias.
        </div>
        <div>Aliquid autem consequuntur deserunt dicta dignissimos eligendi eos et eum eveniet ex, fugit illum inventore
            laboriosam, magnam molestiae natus officiis optio, praesentium quae quasi quis reiciendis sapiente suscipit
            vero vitae.
        </div>
        <div>Accusantium adipisci aliquam aliquid delectus deserunt dicta, distinctio dolores eveniet, fugiat harum
            inventore iste mollitia natus necessitatibus odit quasi, quia quis reiciendis rem voluptate. Accusantium ad
            officia repellendus ullam veniam.
        </div>
        <div>Animi, dolorem dolores, error id in iste iusto, labore libero quam quasi reiciendis saepe suscipit velit.
            Accusamus ad eos eum neque numquam odio possimus ratione recusandae saepe tempora, ullam vitae?
        </div>
        <div>Accusamus animi debitis error facilis laboriosam saepe vitae? Aliquam architecto cumque eligendi fuga
            officiis provident quam, veniam. Aperiam dignissimos ducimus itaque labore, laudantium nam nemo quidem
            reprehenderit saepe vitae voluptatibus.
        </div>
        <div>Accusamus blanditiis dolore eos exercitationem hic id ipsam minima molestiae neque nulla ratione repellat
            sed sequi, temporibus ullam! Accusamus accusantium, at debitis ea ex ipsum maiores saepe sit tempore
            voluptas.
        </div>
        <div>Animi beatae fugit reiciendis similique velit? A amet asperiores at blanditiis, cupiditate delectus dolores
            doloribus fugit laboriosam maiores maxime nam nihil odit perspiciatis quis quo repellendus repudiandae, unde
            ut veritatis.
        </div>
        <div>Adipisci architecto cumque delectus dolores eveniet ipsa laboriosam laudantium ratione suscipit voluptatum.
            Amet, aut blanditiis commodi deleniti doloribus illum minus nostrum repellat reprehenderit ut vel
            voluptates. Autem neque recusandae veniam!
        </div>
        <div>Delectus dignissimos, distinctio dolor doloribus eius esse eum eveniet itaque iure modi perferendis
            reiciendis, sint, sit sunt tempore totam voluptatem! Accusamus, assumenda atque ea facere nisi odio sint
            sunt temporibus.
        </div>
        <div>At deleniti dignissimos eius expedita harum incidunt modi nesciunt qui quibusdam quidem rem, sapiente
            totam, vel. Ab, aliquid aut ducimus earum excepturi facere? Aperiam eum harum in molestias quod sunt.
        </div>
        <div>Aliquid laudantium quae quasi vero voluptatum. Deserunt fugiat illum itaque magni nesciunt quia quibusdam
            recusandae reprehenderit totam veniam. Aut blanditiis culpa error expedita ipsam officia placeat provident
            quas quibusdam ullam.
        </div>
        <div>Labore, officiis velit! Accusantium cum dolores expedita in maxime nisi quis quo quod! Debitis delectus,
            deleniti eligendi ipsam libero molestiae nulla quas similique unde voluptates. Autem debitis nam ullam
            voluptatum?
        </div>
        <div>Accusantium asperiores commodi consequatur cum dignissimos esse et itaque minus nihil non nulla obcaecati
            porro quam quia quisquam, quos ratione saepe sapiente sequi sint, temporibus, totam unde! Ab, excepturi,
            perferendis!
        </div>
        <div>Debitis, doloribus ipsam nam quam recusandae soluta tenetur totam vero! Ad alias amet aspernatur atque,
            consectetur deserunt ducimus eligendi harum incidunt inventore iure optio perspiciatis placeat rem
            reprehenderit similique ullam.
        </div>
        <div>Accusamus aliquam deserunt dolor ea inventore magni nisi porro ratione voluptatum. Commodi harum magnam,
            maiores maxime minus nam possimus soluta? A, architecto distinctio error facilis magni quod suscipit ullam
            voluptates!
        </div>
        <div>Aliquam architecto dolorem enim expedita fugiat iusto maxime necessitatibus, quia tenetur unde. Accusantium
            adipisci consequatur delectus doloremque eum eveniet expedita minus necessitatibus numquam optio,
            perspiciatis placeat quos sequi sit ut.
        </div>
        <div>Ab accusantium asperiores, aspernatur corporis cumque dicta facilis, fugit minima natus optio placeat
            quibusdam recusandae unde vero voluptatibus. Ad ipsum iste nobis porro? Aliquam fuga, minima mollitia nam
            non veritatis?
        </div>
        <div>Autem error eum harum ipsa, nemo pariatur sint. Exercitationem, quisquam quos? A aspernatur autem ipsam
            itaque modi possimus recusandae reiciendis! Laudantium nisi, sequi. Alias aliquid dignissimos laborum minus
            possimus provident!
        </div>
        <div>Ad aliquam amet, assumenda cum delectus dolore doloribus earum eos eum in itaque laboriosam neque nihil
            nobis nostrum quae quisquam repellendus saepe tempore tenetur totam ut vero voluptates. Magnam, voluptate?
        </div>
        <div>Eaque illum praesentium sunt? Adipisci at atque culpa debitis dolor dolore dolorum ducimus error esse hic
            laboriosam maiores modi molestias nihil, perferendis quibusdam, quo reprehenderit sequi suscipit, tempora
            vel voluptas.
        </div>
        <div>Assumenda autem consectetur, est ipsum possimus quaerat repudiandae? Aut autem beatae consectetur
            consequuntur, dolores, ducimus eligendi fugiat minus nihil odio quasi quisquam, tempora tempore veritatis
            voluptas voluptatibus voluptatum. Ex, similique?
        </div>
        <div>Accusamus, aliquam blanditiis dignissimos distinctio earum libero natus nesciunt numquam odit possimus quae
            quidem rem velit! Accusamus, consectetur culpa ea eligendi error excepturi in ipsum, laboriosam, maiores
            modi officia quae?
        </div>
        <div>Accusantium ad, alias dolorem error excepturi expedita id incidunt maiores odit quidem, reiciendis rem
            rerum saepe sunt, tempore? Amet blanditiis consequuntur corporis distinctio eaque ipsam, nesciunt pariatur
            possimus reiciendis velit!
        </div>
        <div>Adipisci asperiores aut blanditiis corporis deleniti eveniet explicabo fugit, harum ipsam magnam maxime
            minima, modi nesciunt nostrum pariatur praesentium quasi recusandae sequi veritatis vitae. Assumenda eos
            maiores suscipit totam vitae?
        </div>
        <div>Ad adipisci architecto aut, consequuntur, dolor enim exercitationem illo iste iusto mollitia natus nisi
            possimus quae quod sed. Blanditiis cumque doloremque fugiat iste labore nobis, officiis quis quisquam soluta
            veniam!
        </div>
        <div>Excepturi molestiae nobis obcaecati porro saepe sed ullam voluptatem! Aliquid atque corporis esse eum
            exercitationem iusto minima molestias necessitatibus, officia omnis quas, rerum tempore ut vel vitae
            voluptate voluptates! Impedit!
        </div>
        <div>Ad consectetur culpa, doloribus esse excepturi facilis illum itaque minus nam natus nihil nobis, non
            nostrum quas quisquam quos reiciendis repellat sequi sit, temporibus. Consequuntur eos nostrum obcaecati
            reiciendis veniam?
        </div>
        <div>A aliquam aperiam beatae blanditiis corporis eum expedita fugit iure obcaecati perspiciatis quia, ratione
            voluptatem voluptatibus. Animi inventore voluptate voluptatem? Deserunt, dolorem hic. Culpa, ex libero odit
            omnis pariatur placeat!
        </div>
        <div>Ad animi cupiditate dolor dolores enim explicabo hic impedit, itaque laudantium maxime natus neque non odio
            perspiciatis qui quisquam quod reiciendis reprehenderit sint sunt temporibus unde vel vero voluptate
            voluptatum.
        </div>
        <div>Corporis culpa cumque, distinctio, dolores earum eligendi exercitationem illo itaque laborum laudantium
            minima nam natus nihil numquam officiis perspiciatis quae quia quidem quo recusandae repellendus, saepe sint
            suscipit vero voluptatem!
        </div>
        <div>Ab blanditiis consequuntur cum debitis dolorem doloremque dolores eligendi fuga illum impedit incidunt,
            nisi numquam officia quidem, quisquam sequi sit suscipit totam ut veniam? Aliquid aperiam dicta eaque fugit
            vel.
        </div>
        <div>Ad aliquam aliquid animi architecto aspernatur assumenda autem beatae cumque delectus eligendi eveniet iure
            laboriosam laudantium libero magnam maiores molestias, nesciunt, non nulla officia quaerat rem unde ut vero
            vitae?
        </div>
        <div>Aliquid eligendi ex, officiis quae sit vel! Aliquam aliquid amet, aspernatur eos expedita harum id numquam
            tenetur! Alias aperiam, consequatur, cum distinctio itaque neque quaerat saepe sint suscipit unde voluptate!
        </div>
        <div>Asperiores culpa distinctio, ea eum molestias odit similique. Aliquid at culpa delectus et fugit,
            laboriosam minus nemo porro quam quasi reiciendis sapiente sit, temporibus unde voluptate? Aspernatur
            commodi nostrum quos.
        </div>
        <div>Ab aliquid cum eum, facilis fugit ipsum itaque obcaecati perspiciatis placeat, possimus praesentium quia
            ratione veniam voluptates voluptatum. Animi eligendi eum excepturi fugit ipsam laborum magni minus, natus
            nesciunt quo.
        </div>
        <div>Adipisci atque commodi deleniti eveniet excepturi exercitationem, inventore laborum molestiae quas tempora?
            At, consequatur corporis deleniti dignissimos enim in, itaque laborum nesciunt nihil numquam obcaecati,
            optio pariatur possimus quidem sed.
        </div>
        <div>Blanditiis ipsa necessitatibus nihil officiis quis recusandae repellendus veritatis. A accusantium
            consectetur eius fuga id iusto minus molestias mollitia nesciunt porro provident quos, rerum similique
            soluta tempore tenetur voluptates voluptatibus.
        </div>
        <div>Assumenda aut delectus ducimus ea iusto libero minima obcaecati pariatur placeat saepe sapiente sequi,
            suscipit veritatis. Assumenda atque dignissimos earum error temporibus veritatis! Dicta dignissimos minus
            odio, praesentium recusandae sequi!
        </div>
        <div>Asperiores consectetur, error est eveniet, harum id impedit pariatur perspiciatis, possimus quo quod
            repellat suscipit unde! Et ex placeat, provident quidem repellendus voluptatibus! Beatae, quod totam! Itaque
            nobis nulla rerum!
        </div>
        <div>Adipisci alias, corporis deserunt dolore ducimus eligendi est id incidunt iste laborum nam nemo nobis
            placeat quae quis saepe sit, sunt tempora unde vero! A animi inventore quas quo tempora?
        </div>
        <div>Deleniti hic laboriosam minus molestias repudiandae! Asperiores aspernatur, aut consequuntur culpa dicta et
            facilis id labore nesciunt perferendis provident quaerat, soluta voluptate! Consequatur inventore libero
            maxime quia ut voluptas voluptatum.
        </div>
        <div>Commodi enim error harum maiores molestiae, nihil numquam, quasi qui quibusdam ratione sed tempora ullam
            voluptatibus. At illo illum labore soluta? Cumque facere nesciunt, non nostrum quisquam sit suscipit
            veritatis!
        </div>
        <div>A amet consectetur consequatur culpa debitis eaque, eligendi modi nobis quaerat tempora. Aut est minima
            sequi voluptate. Consectetur dolorem dolores, exercitationem in magni molestias, odit quam quisquam ratione
            rerum vel.
        </div>
        <div>Amet autem consequatur earum iusto, praesentium quisquam reprehenderit sit. Exercitationem, nemo nulla. Et
            facere, obcaecati. Eos, ut vitae? Animi aperiam consectetur delectus est fuga magnam nihil placeat, sapiente
            similique voluptatibus.
        </div>
        <div>Ab aliquid assumenda consectetur consequuntur delectus eveniet facere fuga inventore ipsa, itaque labore
            laboriosam nisi perspiciatis placeat provident quisquam repellendus repudiandae, rerum sed soluta sunt
            veniam voluptatem. Enim, et sequi?
        </div>
        <div>A accusantium aperiam architecto assumenda consectetur corporis debitis, dignissimos dolorum et eum, ex
            magnam magni modi omnis placeat qui, quos ratione rem repellat reprehenderit repudiandae tempora vitae. Ad
            iste, praesentium.
        </div>
        <div>A consectetur consequatur consequuntur dolorem doloremque dolores esse et facere facilis fuga fugit maxime
            minus necessitatibus numquam perferendis porro praesentium qui quidem quo reprehenderit sapiente, tempore
            temporibus ullam unde voluptatibus?
        </div>
    </div>
</body>
</html>